
<template>
  <view class="index_class">
	  <!-- v-if="backinfo.id" -->
    <view class="bank-creat" v-for="(item,index) in backList" :key="index">
      <view class="bankname">
        <image src="../../static/img/bank-list.png" />
        <view>
          <view>{{item.bank_name}}</view>
          <view style="margin-top: 20upx;">{{filCardNum(item.card_number)}}</view>
        </view>
      </view>
      <view class="relieve-add" @click="relievecard(item.id)">
       解除绑定
      </view>
    </view>
    
    <view v-if="!backinfo.id" class="bank-list" :style="{background:'linear-gradient(90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)','color':'#fff'}" @click="goTarget">
      <image class="addimg" src="../../static/img/bank-add.png" />
      <view class="add-text">添加绑定银行卡</view>
    </view>
    
    <!-- <view class="tips">温馨提示:一个用户只能绑定一张银行卡</view> -->
	<view style="height: 100upx;"></view>
	<view class="fixed-bottom">
		<view style="width: 90%;">
			<button @click="goTarget" class="form-btn" :style="{background:'linear-gradient(90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)','color':'#fff'}">添加银行卡</button>
		</view>
	</view>
  </view>
</template>

<script>
var app = getApp();
export default {
  onShow(){
    this.getBankCardinfo()
  },
  data() {
    return {
      backinfo:{},
	  backList:[]
    }
  },
  methods: {
	filCardNum(val){
		let str = `**** **** **** ${val.substr(val.length-4)}`
		return str;
	},
	goTarget(){
	  // app.goto('/pages/my/addBankCard?addtype=1')
	  app.goto('/pages/my/selectAddBankCard')
	},
    getBankCardinfo(){
		app.get("ApiMy/myBankCard",{},(res)=>{
        if(res.status == 1) {
          if (!res.data) { return false}
		  this.backList = res.data;
          // let str = res.data.card_number + ''
          // res.data.card_number = `**** **** **** ${str.substr(str.length-4)}`
          // this.backinfo = res.data
        }
      })
    },
    relievecard(id){
		app.confirm('确认解绑银行卡吗?', (el) => {
      // this.$showModal({content:this.$t('确认解绑银行卡吗')+'？'}).then(el=>{
        // if(el.confirm) {
        
		  app.post("ApiMy/dgdeletecard",{card_id:id},(res)=>{
          // this.$http.getdeletecard({card_id:id}).then(res=>{
            if(res.status == 0) {
				app.error(res.mess)
              
            }else if(res.status == 1){
				app.success('成功')
				this.backinfo = {}
				this.getBankCardinfo()
			}
          })
        // }
      })
      
    }
  },
}
</script>

<style scope lang="scss">
.index_class {
  padding: 50upx 24upx 0 24upx!important;
}
page ,.index_class{
  height: 100%;
}
// 我的银行卡
.bank-list {
    width: 100%;
    height: 265rpx;
    background-color: red;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .addimg {
        width: 100rpx;
        height: 100rpx;
    }

    .add-text {
        font-size: 30upx;
        margin-top: 34rpx;
        color: #fff;
    }
}

.tips {
    color: #333;
    font-size: 24upx;
    margin-top: 30rpx;
}

.bank-creat {
    width: 100%;
    height: 265rpx;
    background-color: red;
    border-radius: 10rpx;
    position: relative;
	margin-bottom: 20upx;
    .bankname {
        display: flex;
        align-items: center;
        height: 70%;
        padding-left: 36rpx;
        border-bottom: 1rpx solid rgba(255, 137, 138, 1);

        image {
            width: 92rpx;
            height: 73rpx;
            margin-right: 14rpx;
        }

        view {
            font-size: 30upx;
            color: #fff;
        }
    }

    .relieve-add {
        position: absolute;
        right: 25rpx;
        bottom: 13rpx;
        width: 130rpx;
        text-align: center;
        height: 50rpx;
        line-height: 50rpx;
        border-radius: 10rpx;
        border: 1rpx solid rgba(255, 137, 138, 1);
        font-size: 24upx;
        color: #fff;
    }
}


.refun-text>view {
    color: #999;
    font-size: 26rpx;
    padding-top: 10rpx;
}

.btn-box {
    display: flex;

}

.tianxie {
    background-color: red;
    border-color: red  !important;
    color: #fff  !important;
}

.chexClick {
    padding: 3rpx 10rpx;
    font-size: 26rpx;
    border: 1rpx solid #999;
    border-radius: 10rpx;
    margin-right: 15rpx;
    text-align: center;
    margin-top: 20rpx;
    color: #999;
}

.time view {
    font-size: 26rpx !important;
}
.fixed-bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 100upx;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
